<template>
    <div class="gramos-login">
        <div class="page-loader" v-show="isLoaded">
            <div class="spinner-border"></div>
            <span>Loading ...</span>
        </div>

        <e-container class="h-100vh">
            <el-row type="flex" align="center" justify="center" class="h-100vh" style="align-items: center">
                <el-col :md="12">
                    <img class="img-fluid" src="~@/assets/gramos/login1.png"
                        style="display: flex; border-radius: 8px; min-width:620px; min-height: 575px;" alt="...">
                </el-col>
                <el-col :md="6" :offset="1"
                    style="background-color: #fff; padding: 40px; border-radius: 15px; opacity: 0.85; width: 460px; min-height: 575px">
                    <div class="d-flex align-items-center" style="margin-bottom: 20px; margin-left: 68px">
                        <img src="~@/assets/gramos/logo1.png" class="m-r-15" style="margin-right: 15px" min-width="90px"
                            alt="">
                        <h3 class="m-0" style="margin: 0; font-size: 40px;">{{ setting.title }}</h3>
                    </div>
                    <p style="font-size: 16px; color: #9c9f9e">请输入账号密码，登录系统</p>
                    <form action="javascript:;" id="loginForm" name="loginForm" method="post" @submit="login">
                        <div class="form-group mb-4">
                            <el-input type="text" v-model="form.username" id="username" autofocus
                                placeholder="请输入账号"></el-input>
                        </div>
                        <div class="form-group mb-4">
                            <el-input type="password" v-model="form.password" id="password"
                                placeholder="请输入密码"></el-input>
                        </div>
                        <div class="form-group mb-4" style="display: flex">
                            <el-input type="text" v-model="form.pagerandom" name="pagerandom"
                                class="form-control form-control-lg" id="pagerandom" placeholder="请输入验证码">
                                <span class="input-group-append" slot="append"
                                    style="display: flex;width: 100%; height: 100%">
                                    <e-img :src="captchUrl"
                                        style="min-width: 106px;min-height: 38px; width: 100%; height: 100%"
                                        onClick="this.src='captcha.do?time='+new Date().getTime();" alt="点击刷新" />
                                </span>
                            </el-input>
                        </div>
                        <div class="form-group mb-4">
                            <el-select id="sys" name="cx" v-model="form.cx" class="form-control-lg">
                                <el-option :value="r" :label="r" v-for="r in rules" :key="r"
                                    style="font-size: 16px"></el-option>
                            </el-select>
                        </div>

                        <div style="display: flex; padding-top: 20px">
                            <el-button type="primary" native-type="submit"
                                class="btn btn-primary btn-lg btn-block btn-uppercase mb-4"
                                style="font-size: 23px; font-weight: bold; letter-spacing: 5px; padding: 10px; margin-right: 40px; border-radius: 7px; width: 90%">
                                登录
                            </el-button>
                            <el-button type="primary" class="btn btn-primary btn-lg btn-block btn-uppercase mb-4"
                                style="font-size: 23px; font-weight: bold; letter-spacing: 5px; padding: 10px 0; border-radius: 7px;">
                                <router-link to="/useradd" style="color: whitesmoke">注册</router-link>
                            </el-button>
                        </div>
                        <a class="back-main" style="float: right;"><router-link to="/"
                                class="back-main">返回主页></router-link></a>
                    </form>
                </el-col>
            </el-row>
        </e-container>

    </div>
</template>
<style type="type/scss" lang="scss">
.gramos-login {
    height: 860px;
    width: 100%;
    background: #ffffff;
    font-family: "微软雅黑", "Microsoft YaHei", sans-serif, Arial, 'Times New Roman', -apple-system, BlinkMacSystemFont, sans-serif;

    .h-100vh {
        height: 99%;
        width: 99%;
        border-radius: 20px;
        //background-color: #eceef3;
        //background-color: #ECEFF1;
        background-size: cover;
        background-image: url(~@/assets/gramos/login11.png);
    }

    .el-col {
        //border: #bfc1c4 solid 0.5px;
        //border: #eceef3 solid 0.5px;
        border-radius: 15px;
    }

    .el-input {
        font-size: 17px;
    }

    .el-input-group__append {
        padding: 0;
    }

    .d-flex {
        display: -ms-flexbox !important;
        display: flex !important
    }

    .form-control-lg {
        width: 100%;
    }

    .btn-block {
        display: block;
        width: 100%;
    }

    h3 {
        font-size: 26px;
        font-weight: 1000;
        letter-spacing: .07em;
    }

    .align-items-center {
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .page-loader {
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1001;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .align-items-md-center {
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .page-loader .spinner-border {
        margin-bottom: 15px;
    }

    .mb-4,
    .my-4 {
        margin-bottom: 1.5rem !important
    }

    .page-loader span {
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #646464;
        font-size: 12px;
    }

    .back-main {
        font-size: 17px;
        color: #9c9f9e;
        font-weight: 600;
    }

    .back-main:hover {
        cursor: pointer;
        color: #b6b1b1;
    }

    .el-input.form-control-lg {
        display: flex;
        width: 73%;
        padding: 0;
        margin: 0;
        margin-bottom: 8px;
    }

}
</style>

<script>
import setting from "@/setting";
import api from "@/api"

// location.reload();

export default {
    name: "gramos-login",
    data() {
        return {
            isLoaded: true,
            setting,
            captchUrl: '',
            loading: false,
            form: {
                username: '',
                password: '',
                cx: '用户',
                pagerandom: '',
            },
            rules: [
                '用户',
                '管理员',
            ]
        }
    },
    watch: {},
    computed: {},
    methods: {
        login() {
            this.loading = true;
            this.$store.dispatch('user/login', this.form).then(res => {

                this.loading = false;
                if (res.code == api.code.OK) {
                    this.$message.success('登录成功');
                    var redirect = this.$route.query.redirect;
                    if (redirect) {
                        this.$router.replace(redirect);
                    } else {
                        this.$router.replace('/admin/sy');
                    }
                } else {
                    this.$message.error(res.msg);
                }
                if (res.code == 20) {
                    this.loadCaptch();
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(err.message)
            });
        },
        loadCaptch() {
            api.captch().then(res => {
                console.log(res);
                this.form.captchToken = res.token;
                this.captchUrl = res.url;
            });
        }
    },
    created() {
        this.form.cx = this.rules[0];
        this.loadCaptch();

    },
    mounted() {
        setTimeout(() => {
            // this.isLoaded = false;
            if (!sessionStorage.getItem('isPageReloaded')) {
                sessionStorage.setItem('isPageReloaded', 'true');
                location.reload();
            } else {
                sessionStorage.removeItem('isPageReloaded');
                this.isLoaded = false;
            }
        }, 500);
    },
    destroyed() {
    }
}
</script>